<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/resources/jstl_contexpath.jsp"%>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>

        <meta charset="UTF-8">
        <title>${activity.name}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection"content="telephone=no, email=no" />
        <meta name="keywords" content="">
        <meta name="description" content="">
        <!-- no cache -->
        <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <!-- css -->
        <link rel="stylesheet" type="text/css" href="<c:url value="/resources/front/css/reset.css" />" />
        <link rel="stylesheet" type="text/css" href="<c:url value="/resources/front/css/activity.css" />" />
    </head>
    <body>
        <div class="pager">
            <div class="header">
                <div class="mainTitle">${activity.title}</div>
                <div class="subTitle">${activity.description}</div>
                <div class="banner"><img src="${ctx}/${activity.cover_url}" alt=""></div>
                <div class="act-info">
                    <p>
                        <i class="detail">活动详情：</i>${activity.content}
                    </p>
                </div>
            </div>
            <div class="process">
                <div class="main-section">
                    <div class="title"><img src="<c:url value="/resources/front/img/hdlc-title.png" />" alt=""></div>
                    <div class="sec-content">
                        <div class="bg-bar"></div>
                        <ul>
                            <c:forEach var="flow" items="${activity.flow_args}" varStatus="status">
                                <li><i class="index">${status.index + 1}</i><p>${flow}</p></li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="time-addr">
                <div class="main-section">
                    <div class="title"><img src="<c:url value="/resources/front/img/sjdd.png" />" alt=""></div>
                    <div class="sec-content">
                        <p>活动时间：${activity.begin_time}-${activity.end_time}</p>
                        <p>活动地点：${activity.place}</p>
                    </div>
                </div>
            </div>
            <c:if test="${activity.status == 1}">
            <div class="form">
                <div class="form-item">
                    <input type="hidden" name="aid" id="aid" value="${aid}" />
                    <input type="hidden" name="cid" id="cid" value="${cid}" />
                    <h3>报名信息</h3>
                    <div class="form-inline">
                        <p class="form-title need"><span>您的姓名</span></p>
                        <input type="text" name="userName">
                    </div>
                    <div class="form-inline">
                        <p class="form-title need"><span>您的性别</span></p>
                        <div class="sex-choose">
                            <span><i class="sex active">男</i>男</span>
                            <span><i class="sex">女</i>女</span>
                        </div>
                    </div>
                    <div class="form-inline">
                        <p class="form-title need"><span>联系电话</span></p>
                        <input type="tel" name="userTel">
                    </div>
                    <div class="form-inline">
                        <p class="form-title">身份证（选填）</p>
                        <input type="text" name="userIdCard">
                    </div>
                    <div class="form-inline">
                        <p class="form-title need"><span>家庭住址</span></p>
                        <input type="text" name="userAddress">
                    </div>
                    <div class="form-inline">
                        <p class="form-title need"><span>结婚预算</span></p>
                        <input type="text" name="userPay">
                    </div>
                    <div class="form-inline">
                        <p class="form-title need"><span>结婚预期</span></p>
                        <input type="text" name="userTime">
                    </div>
                </div>
            </div>
            <div class="demand">
                <div class="content-box">
                    <h3>筹婚需求</h3>
                    <div class="demand-box">
                        <ul>
                            <li class="demand-item">婚宴酒店</li>
                            <li class="demand-item">婚纱摄影</li>
                            <li class="demand-item">婚礼策划</li>
                            <li class="demand-item">旅拍</li>
                            <li class="demand-item">摄影</li>
                            <li class="demand-item">摄像</li>
                            <li class="demand-item">化妆师</li>
                            <li class="demand-item">司仪</li>
                            <li class="demand-item">婚纱礼服</li>
                            <li class="demand-item">婚礼用品</li>
                            <li class="demand-item">珠宝首饰</li>
                            <li class="demand-item">蜜月旅行</li>
                        </ul>
                        <input type="text" name="demandOther" placeholder="其他需求">
                    </div>
                </div>
            </div>
            <div class="submit-btn">
                <div class="btn">提交</div>
                <div class="btn_link"><a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&scene=110&__biz=MzA4MjA1MDQyMg==#wechat_redirect">关注婚纱城公众号</a></div>
            </div>
            </c:if>
            <div class="bottom">苏州知行合一网络科技有限公司提供技术支持，版权所有</div>
            <div style="display: none;">
                <img src="<c:url value="/resources/front/img/check-active.png" />" alt="">
            </div>
        </div>

        <script type="text/javascript" src="<c:url value="/resources/front/js/jquery-2.1.4.min.js" />" ></script>
        <script type="text/javascript" src="<c:url value="/resources/front/js/common.js" />" ></script>
        <script type="text/javascript">
            (function($){
                var ajaxStatus = true;
                $('.form').on('click','.sex-choose span',function(){
                    var  _ = $(this);
                    _.find('i').removeClass('active').addClass('active').parent().siblings().find('i').removeClass('active');
                });
                $(".demand-box").on('click','li',function(){
                    var _ = $(this);
                    _.hasClass('active') ? _.removeClass('active') : _.addClass('active');
                });
                $(".btn").on('click',function(){
                    if(ajaxStatus){
                        ajaxStatus = false;
                        var phoneNumber=/^(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/,
                                idCardNo=/^\d{15}(\d{2}(\d|x))?$/i;
                        var userName = $.trim($('input[name="userName"]').val()),// 姓名
                                userSex, // 性别
                                userTel = $.trim($('input[name="userTel"]').val()),// 电话
                                userIdCard = $.trim($('input[name="userIdCard"]').val()),// 身份证
                                userAddress = $.trim($('input[name="userAddress"]').val()),// 地址
                                userPay = $.trim($('input[name="userPay"]').val()),// 预算
                                userTime = $.trim($('input[name="userTime"]').val()), // 预期
                                userDemands = [], //需求
                                userDemandsOher =$.trim($('input[name="demandOther"]').val()); // 其他需求
                        $('.sex-choose').find('i.sex').each(function(){
                            if($(this).hasClass('active')){
                                userSex = $(this).text();
                            }
                        });
                        $(".demand-box").find(".demand-item").each(function(){
                            if($(this).hasClass('active')){
                                userDemands.push($(this).text());
                            }
                        });
                        if(userName.length<2){
                            alert('请输入正确的姓名!');
                            ajaxStatus = true;
                            return;
                        }
                        if(!phoneNumber.test(userTel)){
                            alert('请输入正确的手机号码!');
                            ajaxStatus = true;
                            return;
                        }
                        if(userIdCard.length>0 && !idCardNo.test(userIdCard)){
                            alert('请输入正确的身份证号码!');
                            ajaxStatus = true;
                            return;
                        }
                        if(userAddress.length<2){
                            alert('请输入正确的住址!');
                            ajaxStatus = true;
                            return;
                        }
                        if(userAddress.length<1){
                            alert('请输入正确的结婚预算!');
                            return;
                        }
                        if(userAddress.length<1){
                            alert('请输入正确的结婚预期!');
                            ajaxStatus = true;
                            return;
                        }
                        var aid = $("#aid").val();
                        var cid = $("#cid").val();
                        var params = {
                            aid:aid,
                            cid:cid,
                            userName:userName,
                            userSex:userSex,
                            userTel:userTel,
                            userIdCard:userIdCard,
                            userAddress:userAddress,
                            userPay:userPay,
                            userTime:userTime,
                            userDemands:userDemands.join(','),
                            userDemandsOher:userDemandsOher
                        };
                        // console.log(params);
                        $.ajax({
                            url:"${ctx}/activity/signup/dosignup",
                            type:"post",
                            data:params,
//                            dataType:'json',
                            success:function(data){
                                if(data > 0){
                                    alert('提交成功!');
                                }else if(data == -1){
                                    alert('您已经报过名，不能重复报名');
                                }else{
                                    alert('失败，请稍后再试');
                                }
                                ajaxStatus = true;
                            },
                            error:function(){
                                alert('网络故障，请稍后重试!');
                                ajaxStatus = true;
                            }
                        });
                    }
                })
            })(jQuery);



        </script>
	</body>
</html>